<template>
  <view class="container">
    <!-- 单张图片 -->
    <swiper :indicator-dots="false" indicator-color="blue" indicator-active-color="red" :autoplay="true"
    :interval="3000" :duration="1000"  class="a">
    <swiper-item >
    <view class="swiper-item">	<image src="../../static/zhiyun.jpg" mode="aspectFill" class="swiper-item1"> </image></view>
    </swiper-item>
    <swiper-item>
    <view class="swiper-item">	<image src="../../static/zr1.png" mode="aspectFill" class="swiper-item2"></image></view>
    </swiper-item>
    <swiper-item>
    <view class="swiper-item">	<image src="../../static/zr2.png" mode="aspectFill" class="swiper-item3"></image></view>
    </swiper-item>
    </swiper>

    <!-- 核心产品能力标题 -->
    <h3 class="core-products-title">核心产品能力</h3>
	<a class="aa">以能力驱动为教学理念的数字化教学管理平台</a>
	
	<image :src="singleImage.src1" mode="aspectFill" class="single2" ></image>
	<h3 class="core-products-title">部分入驻院校</h3>
	<a class="aaa">以下是排名不分先后顺序</a>
	<image :src="singleImage.src2" mode="aspectFill" class="single2" ></image>
	<image :src="singleImage.src3" mode="aspectFill" class="single3" ></image>
	
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 单张图片数据
const singleImage = {
  src: '../../static/zhiyun.jpg' ,
  src1:'../../static/neirong.jpg',// 替换为你的图片路径
  src2:'../../static/xuexiao.jpg',
  src3:'../../static/lianxi.jpg'
};
</script>

<style scoped>
	
	.container {
	  min-height: 100vh;
	  background-color: #f5f5f5;
	  padding: 10px; /* 添加一些内边距，避免内容紧贴边缘 */
	}
/* 图片容器 */
.image-container {
  width: 100%;
  overflow: hidden;
}

/* 单张图片样式 */
.single-image {
  width: 100%;
  height: 130px; /* 根据需要调整高度 */
}

/* 核心产品能力标题样式 */
.core-products-title {
  margin-left: 140px; /* 根据需要调整左边距 */
  margin-top: 20px; /* 根据需要调整上边距 */
  font-size: 15px; /* 根据需要调整字体大小 */
  color: #333; /* 根据需要调整颜色 */
}
.aa{
	font-size: 13px;
	margin-left: 50px;
	 font-family: 'SimHei', sans-serif;
}

.single2{
	width: 100%;
	margin-top: 20px;
	height: 320px;
	border-radius: 10px;
	}
	.aaa{
		margin-left: 120px;
		margin-top: 12px;
		font-size: 13px;
		font-family: 'SimHei', sans-serif;
		}
		.swiper-item{
			width: 100%;
		}
		
		.swiper-item1{
			 border-radius: 10px;
			width: 100%;
			height: 150px;
		}
		.swiper-item2{
			 border-radius: 10px;
			width: 100%;
			height: 150px;
		}
		.swiper-item3{
			 border-radius: 10px;
			width: 100%;
			height: 150px;
		}
		
		.single3{
			width: 100%;
			height: 600px;
		    margin-top: 20px;
			}
</style>